<template>
<div class="main">
 <mynav class="navclass"></mynav>
<!--  总体从左到右-->
  <div style="display: flex;flex-direction: row;justify-content: flex-start;width: 100%;height: 100%;margin-top: 20px">
<!--    左边从上到下-->
   <div style="display: flex;flex-direction: column;align-items: center;width: 360px;">
       <myweather></myweather>
       <options style="margin-top: 20px"></options>
     <div style="display: flex;flex-direction: row;justify-content: flex-start">
        <power id_name="power1"></power>
        <power id_name="power2"></power>
     </div>
     <h3 style="color: white">电源管理</h3>
   </div>
<!--    右边从上到下-->
    <div style="margin-left: 10px; display: flex;flex-direction:row;flex-wrap: wrap;justify-content: flex-start">
<!--      第一行-->
      <div style="display: flex;flex-direction: row;justify-content: flex-start;">
        <rtemperature></rtemperature>
        <div style="margin-left: 180px; width: 350px;height: 350px">
          <dormitory></dormitory>
        </div>
      </div >
<!--      第二行-->
      <div style="display:flex;flex-direction: row;justify-content: flex-start;">
<!--        左边从上到下-->
        <div style="width: 600px;height: 400px; display: flex;flex-direction: column;align-items: center">
          <div style="width: 600px;height: 200px;display: flex;flex-direction: row;justify-content: flex-start">
              <div style="width:300px;height: 200px ">
               <dtemperature></dtemperature>
              </div>
              <div style="width:300px;height: 200px; ">
               <humidity></humidity>
              </div>
          </div>
          <div style="width: 600px;height: 200px;">
               <droom></droom>
          </div>
        </div>
<!--        右边-->
        <div style="margin-left: 50px; width: 600px;height:350px;margin-top: 25px">
        <information></information>

        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import mynav from '../components/mynav';
import myweather from "../components/myweather";
import options from "../components/options";
import power from "../components/power";
import rtemperature from "../components/rtemperature";
import dtemperature from "../components/dtemperature";
import humidity from "../components/humidity";
import droom from "../components/droom";
import information from "../components/information";
import dormitory from "../components/dormitory";
export default {
  name: "main",
  components:{
    mynav,
    myweather,
    options,
    power,
    rtemperature,
    dtemperature,
    humidity,
    droom,
    information,
    dormitory
  }
}
</script>

<style scoped>
.main{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background:url("../assets/contentback.png");
  height:100%;
  background-size:100% 100%;
}
.navclass{
  width: 100%;
  height: 80px;
}
</style>
